<div class="mat-elevation-z1">
  <mat-toolbar>
    <span class="toolbar-title">现货价格</span>
    <span class="spacer"></span>
    价格来源（首选）&nbsp;&nbsp;
    <mat-form-field class="ds-select">
      <mat-select [(ngModel)]="preferDS" (selectionChange)="preferDSChanged()">
        <mat-option *ngFor="let exch of $exchs | async" [value]="exch.code">
          {{exch.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    &nbsp;&nbsp;
    <button class="flex-button" mat-stroked-button color="primary" (click)="fetchPrices()"
            [disabled]="processes.fetchPrices">
      <mat-icon>refresh</mat-icon>
      刷新价格
    </button>

    <button mat-button [matMenuTriggerFor]="menuActions">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menuActions="matMenu">
      <button mat-menu-item (click)="loadData()" [disabled]="processes.fetchPrices">
        <mat-icon>refresh</mat-icon>
        全部刷新
      </button>
      <button mat-menu-item (click)="showPendingOrders()" [disabled]="processes.loadingPendingOrders">
        <mat-icon>pending_actions</mat-icon>
        当前挂单
      </button>
      <button mat-menu-item (click)="showCurrentStrategies()" [disabled]="processes.loadingStrategies">
        <mat-icon>schedule</mat-icon>
        当前策略
      </button>
      <button mat-menu-item (click)="loadStrategiesCount(true)" [disabled]="processes.loadStrategiesCount">
        <mat-icon>refresh</mat-icon>
        刷新策略数
      </button>
      <button mat-menu-item (click)="showCurrentAssets()">
        <mat-icon>local_atm</mat-icon>
        当前资产（ &gt; $10）
      </button>
      <button mat-menu-item (click)="sellAll()" [disabled]="processes.loadingAssets">
        <mat-icon>done_all</mat-icon>
        全部卖出（ &gt; $10）
      </button>
    </mat-menu>
  </mat-toolbar>

  <table mat-table class="full-width" matSort matSortActive="updateTs" matSortDirection="desc">

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef rowspan="2">#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1 + (paginator ? paginator.pageIndex * paginator.pageSize : 0)}}
      </td>
    </ng-container>

    <ng-container matColumnDef="baseCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header rowspan="2">基础币种</th>
      <td mat-cell *matCellDef="let row">
        <span class="ccy-logo-code clickable" (click)="showBaseCcyInfo(row)">
          <img class="ccy-logo" [src]="CoinLogoPath(row.baseCcy)" alt="">
          <span class="ccy-code">{{row.baseCcy}}</span>
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="quoteCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header rowspan="2">报价币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.quoteCcy)" alt="">
        <div class="ccy-code">{{row.quoteCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="ex">
      <th mat-header-cell *matHeaderCellDef mat-sort-header class="no-padding-left">交易所</th>
      <td mat-cell *matCellDef="let row">{{row.lastTrans?.ex}}</td>
    </ng-container>

    <ng-container matColumnDef="updateTs">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>时间</th>
      <td mat-cell *matCellDef="let row">{{row.lastTrans?.updateTs | date:'MM-dd HH:mm'}}</td>
    </ng-container>

    <ng-container matColumnDef="side">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>方向</th>
      <td mat-cell *matCellDef="let row"
          [class.order-side-buy]="row.lastTrans?.side==='buy'"
          [class.order-side-sell]="row.lastTrans?.side==='sell'">
        {{row.lastTrans?.side}}
      </td>
    </ng-container>

    <ng-container matColumnDef="avgPrice">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>均价</th>
      <!--
      <td mat-cell *matCellDef="let row"
          [matTooltip]="transAmountTooltip(row)"
          matTooltipShowDelay="200"
          matTooltipHideDelay="200"
          matTooltipClass="multi-lines-tooltip">
        {{row.lastTrans?.avgPrice | money}}
      </td>
      -->
      <td mat-cell *matCellDef="let row">
        {{row.lastTrans?.avgPrice | money}}
      </td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>价格</th>
      <td mat-cell *matCellDef="let row">
        <span class="clickable" (click)="refreshSinglePrice(row)">
          {{row.currentPrice?.price | money}}
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="priceChangePercent">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>升/降</th>
      <td mat-cell *matCellDef="let row"
          [class.price-up]="row.priceChangePercent>0"
          [class.price-down]="row.priceChangePercent<0">
        <span class="clickable" (click)="refreshSinglePrice(row)">
          {{row.priceChangePercent | rawpercent }}
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="priceSource">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>来源</th>
      <td mat-cell *matCellDef="let row">
        {{row.currentPrice?.source}}
      </td>
    </ng-container>

    <ng-container matColumnDef="strategyCount">
      <th mat-header-cell *matHeaderCellDef rowspan="2" class="op-head">策略</th>
      <td mat-cell *matCellDef="let row" align="end">
        <span class="clickable" (click)="showStrategies(row)" *ngIf="row.strategyCount">
          <ng-template [ngIf]="row.strategyCount.running>0">
            <span class="accent-color">{{row.strategyCount.running}}</span>
            <span class="subordinated">/</span>
          </ng-template>
          <span [class.subordinated]="row.strategyCount.all===0">{{row.strategyCount.all}}</span>
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef rowspan="2" class="op-head">操作</th>
      <td mat-cell *matCellDef="let row" align="end">
        <button mat-button [matMenuTriggerFor]="klines">
          <mat-icon>more_vert</mat-icon>
          K 线
        </button>
        <mat-menu #klines="matMenu">
          <ng-container *ngFor="let exch of $exchs | async">
            <button mat-menu-item [class.accent-color]="row.lastTrans?.ex===exch.code"
                    (click)="openKlineChart(row,exch.code)" *ngIf="row[exch.code+'Symbol']">
              <mat-icon>show_chart</mat-icon>
              {{exch.name}}
            </button>
          </ng-container>
        </mat-menu>
        <button mat-button [matMenuTriggerFor]="actions">
          <mat-icon>more_vert</mat-icon>
          交易
        </button>
        <mat-menu #actions="matMenu">
          <button mat-menu-item (click)="showOrderDetail(row)" *ngIf="row.lastTrans">
            <mat-icon>details</mat-icon>
            上次交易
          </button>
          <button mat-menu-item (click)="showOrders(row)">
            <mat-icon>list</mat-icon>
            历史交易
          </button>
          <ng-container *ngFor="let exch of $exchs | async">
            <button mat-menu-item [class.accent-color]="row.lastTrans?.ex===exch.code"
                    (click)="openOrderForm(row,exch.code,row[exch.code+'Symbol'])" *ngIf="row[exch.code+'Symbol']">
              <mat-icon>shopping_cart</mat-icon>
              下单（{{exch.name}}）
            </button>
          </ng-container>
        </mat-menu>
      </td>
    </ng-container>

    <ng-container matColumnDef="lastTrans">
      <th mat-header-cell *matHeaderCellDef colspan="4">上次交易</th>
    </ng-container>

    <ng-container matColumnDef="currentPrice">
      <th mat-header-cell *matHeaderCellDef colspan="3">当前价格</th>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumnsH0"></tr>
    <tr mat-header-row *matHeaderRowDef="displayedColumnsH1"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator #paginator
                 [length]="dataSource?.data?.length"
                 [pageIndex]="0"
                 [pageSize]="20"
                 [pageSizeOptions]="[10, 20, 50, 100]">
  </mat-paginator>

</div>

<p>&nbsp;</p>
